<template>
  <div class="container">
    <div id="mapContent">
      <div>
        <button @click="changeCenter(116.412222,39.912345, 25)">修改地图中心点位置</button>
      </div>
    </div>
  </div>
</template>
<script>
import {reactive, ref} from "vue"
export default {
  name: "index",
  setup() {
    const map = ref()
    const overlay = reactive({
      marker: []
    })
    const dataInfo = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
      [116.406605,39.921585,"地址：北京市东城区东华门大街"],
      [116.412222,39.912345,"地址：北京市东城区正义路甲5号"]
    ];
    const init = () => {
      return new Promise((resolve, reject) => {
        // 如果已加载直接返回
        if (window.T) {
          console.log('天地图脚本初始化成功...')
          resolve(window.T)
        } else {
          reject('error')
        }
      })
    }
    init().then((T) => {
      map.value = new T.Map('mapContent')
      map.value.addEventListener('load', () => {
        console.log('load号')
        //创建标注对象
        dataInfo.forEach((item, index) => {
          overlay.marker.push(new T.Marker(new T.LngLat(item[0], item[1]), {
            icon: new T.Icon({
              iconUrl: "./img/1.png", //请求图标图片的URL
              iconSize: new T.Point(30, 30), //图标可视区域的大小。
              iconAnchor: new T.Point(30, 30) //图标的定位锚点
            })
          }))
          map.value.addOverLay(overlay.marker[index])
          addMarkerClick(item[2], overlay.marker[index])
        })
        //向地图上添加标注
        map.value.addEventListener('click', addClickEvent)
      })
      // const lnglat = new T.LngLat(116.40969,39.89945)

      // 设置icon
      map.value.centerAndZoom(new T.LngLat(116.40969,39.89945), 12)

      // 设置地图的缩放等级
      map.value.setMinZoom(5);
      map.value.setMaxZoom(18);

      // 设置地图颜色 只有天地图支持的颜色才可设置
      map.value.setStyle('block')
      map.value.addEventListener('zoomend', zoomWatcher)

    })
    /**
     * 注册地图点击事件
     */
    const addClickEvent = () => {
      console.log('addClickEvent')
      // const lay = new T.TileLayer('/img/1.png', {minZoom: 1, maxZoom: 14})
      // map.value.addLayer(lay)
    }
    /**
     * 注册marker点击事件
     * @param content 文本显示信息
     * @param marker 是哪一个marker
     */
    const addMarkerClick = (content, marker) => {
      marker.addEventListener("click",function(e){
        openInfo(content,e)
        // addMarkerTable(content,e)
        }
      )
    }

    /**
     * 点击图标创建文本信息
     * @param content 文本显示信息
     * @param e
     */
    const addMarkerTable = (content,e) => {
            const label = new T.Label({
        text: `<div>dasda</div>
                <div>1321</div>`,
        position: e.lnglat
      })
      // 创建文本
      map.value.addOverLay(label)
    }

    /**
     * 打开信息窗口
     * @param content
     * @param e
     */
    const openInfo = (content,e) =>{
      const point = e.lnglat
      const markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 创建信息窗口对象
      map.value.openInfoWindow(markerInfoWin,point); //开启信息窗口
    }

    /**
     * 地图更改缩放级别结束时触发触发此事件
     */
    const zoomWatcher = () => {
      console.log(' map.getZoom()',  map.value.getZoom())
      // 当缩放等级小于多少时 隐藏覆盖物
      if (map.value.getZoom() < 9) {
        overlay.marker.forEach((item, index) => {
          item.hide()
        })
      } else {
        overlay.marker.forEach((item, index) => {
          item.show()
        })
      }
    }

    /**
     * 修改地图中心点的位置 跳转到某一个点
     * @param lnglat 地图的中心点地理坐标。
     * @param zoom 地图的比例尺级别
     */
    const changeCenter = (lng, lat, zoom) => {
      map.value.centerAndZoom(new T.LngLat(lng, lat), zoom)
    }
    return {
      map,
      overlay,
      changeCenter
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
#mapContent {
  width: 100%;
  height: 100%;
}
</style>
